<!--报表生成-->
<<template>
<div>
<div class="table">
        <div class="divSearch" style="padding: 6px;">
			<row>
				<i-col :lg="{span:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}"  class="searchLabel" style="padding: 6px;">
					<span>填报级别:</span>
				</i-col>
				<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
					<Select  placeholder="请选择填报级别" class="searchInput" v-model="ReportModel.ReportLevel" :label-in-value="true">
                        <Option v-for="item in ReportLevelList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
					</Select>			
				</i-col>
				<!-- <i-col :lg="{span:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}"  class="searchLabel" style="padding: 6px;">
					<span>填报地区:</span>
				</i-col>
				<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}"  > -->
					<!-- <Select class="searchInput">
						<Option>4545</Option> -->
						<!-- <Tree ref="true"  :data="baseAreaData" :check-strictly="true" show-checkbox  style="margin-left:10px" ></Tree> -->
					<!-- </Select> -->
				<!-- </i-col> -->
				<i-col :lg="{span:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}"  class="searchLabel" style="padding: 6px;">
					<span>报表名称:</span>
				</i-col>
				<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}" style="width: 210px">
					<Select  placeholder="请选择报表" class="searchInput" v-model="ReportModel.TableCode" :label-in-value="true" style="width: 210px">
                        <Option v-for="item in ReportNameList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
					</Select>			
				</i-col> 
				<i-col :lg="{span:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}"  class="searchLabel" style="padding: 6px;">
					<label>上报年度:</label>
				</i-col>     
				<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}" >
					<Select  placeholder="请选择上报年度" class="searchInput" v-model="ReportModel.CreateYear">
                        <Option v-for="item in ReportYearList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
					</Select>									
				</i-col>
				<i-col :lg="{span:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}"   class="searchLabel" style="padding: 6px;">
					<label>时间周期:</label>
				</i-col>     
				<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
					<Select  placeholder="请选择时间周期" class="searchInput"  v-model="ReportModel.Cycle">
						<Option v-for="item in ReportCycleList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
					</Select>									
				</i-col>
				<i-col :lg="{span:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}"   class="searchLabel" style="padding: 6px;"  v-show="ReportModel.Cycle == 12">
					<label >周期值:</label>
				</i-col> 
				<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}" v-show="ReportModel.Cycle == 12" v-model = "ReportModel.CycleValue">
					<Select  placeholder="请选择具体周期值" class="searchInput"  v-model="ReportModel.CycleValue">
						<Option v-for="item in MonthCycleList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
					</Select>									
				</i-col>
				<i-col :lg="{span:1}" :md="{span:1}" :sm="{span:4}" :xs="{span:4}"   class="searchLabel" style="padding: 6px;" v-show="ReportModel.Cycle == 4" >
					<label >周期值:</label>
				</i-col> 
				<i-col :lg="{span:3}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}" v-show="ReportModel.Cycle == 4" v-model = "ReportModel.CycleValue">
					<Select  placeholder="请选择具体周期值" class="searchInput"  v-model="ReportModel.CycleValue">
						<Option v-for="item in QuarterCycleList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
					</Select>									
				</i-col>
                <i-col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}" style="padding-left: 6px;">
					<i-button icon="archive" type="primary"  @click="CreateReport" class="searchButton">
						<span>生成报表</span>
					</i-button>
				</i-col>     
			</row>
		</div>	
		<div style="padding: 5px;">
			<Row>
				<Col span="24" class="col-margin">
				<!--根据需求删除不不要查询条件-->
				填报年度：
				<Select v-model="searchModel.CreateYear" placeholder="全部" style="width: 100px" @on-change="initTableData()">
					<Option value="">全部</Option>
					<Option :value="item.DictValue" v-for="item in ReportYearList" :key="item.DictValue">{{item.DictText}}</Option>
				</Select>
				所属表：
				<Select v-model="searchModel.TableCode" placeholder="全部" style="width: 250px" @on-change="initTableData()">
					<Option value="">全部</Option>
					<Option :value="item.DictValue" v-for="item in ReportNameList" :key="item.DictValue">{{item.DictText}}</Option>
				</Select>
				时间周期：
				<Select v-model="searchModel.Cycle" placeholder="全部" style="width: 100px" @on-change="initTableData()">
					<Option value="">全部</Option>
					<Option :value="item.DictValue" v-for="item in ReportCycleList" :key="item.DictValue">{{item.DictText}}</Option>
				</Select>
				<Button icon="ios-search" type="ghost" @click="initTableData()">查询</Button>
				</Col>
        	</Row>
		</div>	
	    <row><!--数据表格-->
			<Col span="24" class="col-margin">
            <Table size="large" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
            </Col>
	    </row>
	    <row><!--分页插件-->
		    <div class="dataTable">		   
			    <i-col>
					 <!-- <spin size="large"></spin> -->
			    	 <Page style="float:right;margin: 5px 20px 5px 0;" class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
			    </i-col>
			</div>
	    </row>
    </div>
</div>
</template>
<script>
export default {
	data() {
		return {
			self: this,
			tableTotal: 0,//表格记录条数
			ShowModal: false,//modal开关,针对form填报表格
			datas: {},//table数据对象
			ctx: this,//table数据上下文
			baseAreaData: [],
			ReportLevelList: this.GetGroupDict("ReportLevel"),//填报级别	
			ReportNameList: this.GetGroupDict("ReportTableName"),//表名称
			ReportYearList: this.GetGroupDict("ReportYear"),//上报年度列表
			ReportCycleList: this.GetGroupDict("ReportCycle"),//上报周期列表
			MonthCycleList: this.GetGroupDict("MonthCycleValue"),//月份周期值
			QuarterCycleList: this.GetGroupDict("QuarterCycleValue"),//季度周期值
			clientHeight: window.innerHeight - 315,//设置表格高度
			pageSizeOpts: [20, 40, 50],
			columnsList: [
				// {type: 'selection',width: 60,align: 'center'},
				{ title: '报表名称', key: 'TableName' },
				{ title: '报表编号', key: 'TableCode' },
				{ title: '上报年度', key: 'CreateYearName' },
				{ title: '时间周期', key: 'CycleName' },
				{ title: '添加时间', key: 'StrCreateTime' },
				{
					title: '操作', key: 'action', width: 200, align: 'center',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								class: { ideleteColor: true },
								props: {
									type: 'ghost', size: 'small', icon: 'ios-paper-outline'
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.Remove(params.row.Id)
									}
								}
							}, '删除')
						])
					}
				}
			],
			// NameCode:{label:'',value:''},
			ReportModel: {
				TableName: '',
				TableCode: '',
				CreateYear: '',
				Cycle: '',
				CycleValue: '',
				ReportLevel: '1'
			},
			//查询模型：根据需求删除不不要查询条件
			searchModel: {
				Id: '',
				TableName: '',
				TableCode: '',
				CreateYear: '',
				Cycle: '',
				CreateTime: '',
				PageNumber: 1, PageSize: 20
			},
		}
	},
	mounted: function () {
		const that = this;
		window.onresize = () => {
			return (() => {
				that.clientHeight = window.innerHeight - 200;
			})()
		};

	},
	methods: {
		// treeCheckChange(node){
		// 	alert(node);
		// },
		getAreaTree(){
			var self=this;
			self.$http.get("Area/GetAreaTree",{ params: { id: "530000000000" }}).then(function(res){
				if(res.data.status===1){
					for(var i=0;i<res.data.model.length;i++)
					{
						res.data.model[i].checked=false;
						
						if(res.data.model[i].children.length>0)
						{
							for(var j=0;j<res.data.model[i].children.length;j++)
							{
								res.data.model[i].children[j].checked=false;
							}
						}
					}
					self.baseAreaData=res.data.model;
				}
				else {
					self.$Modal.error({ title: "提示信息", content: "地区信息加载失败，请与管理员联系!!!" });
				}
			});
		},
		//生成报表
		CreateReport: function () {
			var self = this;
			self.$http.post('GenerateLog', self.ReportModel).then(function (res) {
				if (res.data) {
					self.$Notice.success({ title: '报表生成成功' });
					self.initTableData();
				} else {
					self.$Notice.error({ title: res.data.message });
				}
			});
		},
		//获取当前页码
		getPageNumber(pageIndex) {
			this.searchModel.PageNumber = pageIndex;
			this.initTableData();
		},
		//获取当前分页大小
		getPageSize(pageSize) {
			this.searchModel.PageSize = pageSize;
			this.initTableData();
		},
		initTableData: function () {//初始化表格数据
			var self = this;
			this.$http.post('GenerateLog/PostPageList', this.searchModel).then(function (res) {
				if (res.data.status === 1) {
					self.datas = res.data;
				} else {
					self.$Modal.error({ title: '提示信息', content: res.data.message });
				}
			});
		},
		Remove: function (id) {
			var self = this;
			self.$Modal.confirm({
				title: '提示信息',
				content: '<p>数据删除后不可恢复，确定要删除？</p>',
				onOk: () => {
					this.$http.delete("GenerateLog", { params: { id: id } }).then(
						function (res) {
							if (res.data.status == 1) {
								self.$Notice.success({ title: '删除成功！', desc: false });
								self.initTableData();
							}
							else {
								self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
							}
						}
					);
				}
			});
		},
		changePage: function (pageIndex) {//改变页码事件
			this.searchModel.PageNumber = pageIndex;
		},
		changePageSize: function (pageSize) {//改变页面记录条数事件
			this.searchModel.PageSize = pageSize;
		}
	},
	created: function () { //初始化函数
		this.getAreaTree();
		this.initTableData();
	},
	watch: {
	}
}
</script>